<template>
  <div class="app-main">
    <div class="search">
      <el-form label-width="100px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="车辆名称：">
              <el-input v-model="reqData.unitName" placeholder="车辆名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button type="primary" plain @click="clear">清空</el-button>
            <el-button type="danger" @click="add">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <table cellpadding="0" cellspacing="0" class="table margin-t-10">
      <tr>
        <th width="80px">序号</th>
        <th>车辆名称</th>
        <th>备注</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in listData" :key="index">
        <td>{{(reqData.currPage - 1) * reqData.pageSize + index + 1}}</td>
        <td>{{item.roleName}}</td>
        <td>{{item.remark}}</td>
        <td>
          <a href="javascript:;" @click="updata(item,reqData.currPage)">修改</a>
          <a href="javascript:;" @click="delect(index)">删除</a>
        </td>
      </tr>
      <tr v-if="!listData || listData.length <= 0">
        <td class="text-center border-b" colspan="3">暂无数据</td>
      </tr>
    </table>
    <pagination v-show="totalPage > 0" :total="totalPage" :page.sync="reqData.currPage" :limit.sync="reqData.pageSize" @pagination="loadData" />

    <!--新增修改-->
    <el-dialog :title="updataTitle" :visible.sync="updataShow" width="500px" :show-close="false">
      <el-form :model="updataData" :rules="rules" ref="updataData" label-width="100px">
        <el-row :gutter="0">
          <el-col :span="24">
            <el-form-item label="角色名称：" prop="roleName">
              <el-input v-model.trim="updataData.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0" class="margin-t-10">
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input v-model.trim="updataData.remark" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="updataSure('updataData')">确认</el-button>
        <el-button type="info" @click="updataClose('updataData')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let vm;
  export default {
    data() {
      return {
        reqData: {
          pageSize: 20,
          currPage: 1
        },
        listData: [
          {
            roleName: '管理员',
            remark: 'admin'
          },
          {
            roleName: '调拨员',
            remark: '11'
          },
          {
            roleName: '配餐员',
            remark: '22'
          }
        ],
        totalPage: 0,

        rules: {
          unitName: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ],
        },

        pagesIndex: '',
        updataShow: false,
        updataTitle: '',
        updataData: {},

        permissionShow: false,
        permissionData: {}
      }
    },
    created(){
      vm = this;
      vm.loadData();
    },
    beforeDestroy() {
      console.log('cardestroy')
    },
    methods: {
      loadData(){
        
      },
      clear(){
        vm.reqData = {
          pageSize: 20,
          currPage: 1
        };
      },
      
      //新增修改
      add(){
        vm.updataShow = true;
        vm.updataTitle = '新增';
        vm.pagesIndex = 1;
        vm.updataData = {
          roleName: '',
          remark: ''
        };
      },
      updata(obj,pages){
        vm.updataShow = true;
        vm.updataTitle = '修改';
        vm.pagesIndex = pages;
        vm.updataData = JSON.parse(JSON.stringify(obj));
      },

      updataSure(formName){
        vm.$refs[formName].validate((valid) => {
          if(valid){
            vm.listData[vm.pagesIndex].roleName = vm.updataData.roleName;
            vm.listData[vm.pagesIndex].remark = vm.updataData.remark;
            vm.updataShow = false;
          }
        })
      },
      updataClose(formName){
        vm.updataShow = false;
        vm.$refs[formName].resetFields();
      },

      //配置权限
      permission(item,pages){

      },

       //删除
      delect(index){
        vm.alert.confirm('您确定删除此数据吗？',{onConfirm(){
          vm.listData.splice(index,1)
        }})
      },
    }
  }
</script>
